<template>
  <div>
    <ShareCard
      :loading="isLoading"
      :cardData="cardData"
      :showTitle="false"
      :bodyStyle="{ padding: '15px 18px' }"
    >
      <template #title> </template>
      <div class="bg-white h-full my-schedule">
        <div class="w-full flex justify-center h-9 items-center relative">
          <div
            v-if="showTitle"
            @click="handleGo"
            class="absolute"
            style="left: 0; font-weight: bold; font-size: 17px"
          >
            <Icon :icon="icon" v-if="icon" :size="18" class="mr-2" />{{ header }}</div
          >
          <div class="flex gap-3 items-center cursor-pointer">
            <img
              src="../../../../assets/images/dashboard/calendar_left.png"
              alt=""
              @click="handleChangeMonth('up')"
            />
            <DatePicker
              v-model:value="date"
              :picker="activeType"
              :bordered="false"
              @change="changeDate"
              :allow-clear="false"
            />
            <img
              src="../../../../assets/images/dashboard/calendar_right.png"
              alt=""
              @click="handleChangeMonth('down')"
            />
          </div>
        </div>
        <div>
          <Calendar v-model:value="date" :fullscreen="false">
            <template #headerRender></template>
            <template #dateCellRender="{ current }">
              <div class="day_style">
                <div>
                  <template v-if="dataList[dayjs(current).format('YYYY-MM-DD')]">
                    <Dropdown @click.prevent>
                      <div class="cursor-pointer" @click.stop="toItemDay()">
                        <div
                          :class="{
                            current_day:
                              dayjs().format('YYYY-MM-DD') === dayjs(current).format('YYYY-MM-DD'),
                          }"
                        >
                          {{ current.date() }}
                        </div>
                        <div
                          v-if="
                            dayjs().format('YYYY-MM-DD') === dayjs(current).format('YYYY-MM-DD')
                          "
                        >
                          <div
                            style="
                              width: 5px;
                              height: 5px;
                              background: #a1a6b5;
                              border-radius: 50%;
                              margin: 2px auto 0;
                            "
                          ></div>
                        </div>

                        <div
                          v-else
                          style="
                            width: 5px;
                            height: 5px;
                            background: #a1a6b5;
                            border-radius: 50%;
                            margin: 0 auto;
                          "
                        ></div>
                      </div>
                      <template #overlay>
                        <Menu>
                          <MenuItem
                            @click="clickItmeInfo(d)"
                            v-for="(d, i) in dataList[dayjs(current).format('YYYY-MM-DD')]"
                            :key="i"
                          >
                            <div>
                              {{ dayjs(d.myDate).format('HH:mm') }} ~
                              {{ dayjs(d.endDate).format('HH:mm') }}
                            </div>
                            <div>
                              {{ d.title }}
                            </div>
                          </MenuItem>
                        </Menu>
                      </template>
                    </Dropdown>
                  </template>
                  <template v-else>
                    <div
                      class="cursor-pointer"
                      @click.stop="toItemDay()"
                      :class="{
                        current_day:
                          dayjs().format('YYYY-MM-DD') === dayjs(current).format('YYYY-MM-DD'),
                      }"
                    >
                      {{ current.date() }}
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </Calendar>
        </div>

        <AllScheduleDrawer @register="registerDrawer" @success="handleSuccess" />
      </div>
    </ShareCard>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, unref } from 'vue';
  import { DatePicker, Dropdown, Menu, Calendar, MenuItem } from 'ant-design-vue';
  import type { Dayjs } from 'dayjs';
  import { dateUtil as dayjs } from '/@/utils/dateUtil';
  import { getListPhase } from '/@/api/workOffice/workOffice';
  import { useDrawer } from '/@/components/Drawer';
  import AllScheduleDrawer from '/@/views/pages/workOffice/schedule/modules/allSchedule/AllScheduleDrawer.vue';
  import { useGo } from '/@/hooks/web/usePage';
  import Icon from '/@/components/Icon/index';
  import ShareCard from './ShareCard.vue';
  export default defineComponent({
    components: {
      DatePicker,
      AllScheduleDrawer,
      Dropdown,
      Menu,
      MenuItem,
      Icon,
      ShareCard,
      Calendar,
    },
    props: {
      loading: Boolean,
      header: {
        type: String as PropType<string>,
        default: '',
      },
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '300px',
      },
      icon: {
        type: String as PropType<string>,
        default: '',
      },
      cardData: {
        type: Object as PropType<object>,
        default: () => {
          return {};
        },
      },
      showTitle: {
        type: Boolean,
        default: true,
      },
    },
    setup(props) {
      const isLoading = ref(false);
      const date = ref<Dayjs>(dayjs());
      const activeType = ref<any>('month');
      onMounted(() => {
        init();
      });
      const init = () => {
        fetch();
      };
      function fetch() {
        getListPhaseData();
      }

      //改变日期
      function changeDate() {
        getListPhaseData();
      }

      const dataList = ref({});
      //获取数据
      const getListPhaseData = () => {
        dataList.value = [];
        getListPhase({
          beginDate: dayjs(unref(date)).startOf('month').format('YYYY-MM-DD'),
          endDate: dayjs(unref(date)).endOf('month').format('YYYY-MM-DD'),
        }).then((res) => {
          if (res.list && res.list.length > 0) {
            const list = res.list;
            console.log('list', list);
            list.forEach((item) => {
              for (let v in item) {
                if (item[v] && item[v].length) {
                  dataList.value[v] = item[v];
                }
              }
            });
            console.log('dataList', dataList.value);
          }
        });
      };

      const handleChangeMonth = (val) => {
        switch (val) {
          case 'up':
            date.value = dayjs(date.value).subtract(1, 'month');
            break;

          case 'down':
            date.value = dayjs(date.value).add(1, 'month');
            break;

          default:
            break;
        }
        getListPhaseData();
      };

      //月点击跳转到当前日期
      function toItemDay() {
        console.log('toItemDay');
        handleGo();
      }

      //点击日程事情
      function clickItmeInfo(record: Recordable) {
        openDrawer(true, {
          record,
          isUpdate: true,
        });
      }
      //抽屉编辑
      const [registerDrawer, { openDrawer }] = useDrawer();
      //抽屉回调
      function handleSuccess() {
        getListPhaseData();
      }

      const go = useGo();
      const handleGo = () => {
        go('/schedule');
      };

      return {
        activeType,
        date,
        changeDate,
        dayjs,
        toItemDay,
        clickItmeInfo,
        registerDrawer,
        handleSuccess,
        isLoading,
        handleGo,
        handleChangeMonth,
        dataList,
      };
    },
  });
</script>
<style scoped>
  .day_style {
    font-weight: 500;
    font-size: 14px;
    color: #32394d;
  }
  .current_day {
    background-color: #5c95f1;
    width: 40px;
    margin: 0 auto;
    color: #fff;
    border-radius: 8px;
  }
  :deep(thead th) {
    padding-bottom: 10px !important;
  }
  :deep(tbody) {
    background: linear-gradient(to bottom right, #e4f0ff 0%, white 100%);
    margin-top: 10px;
  }
  :deep(.ant-picker-input input) {
    text-align: center;
  }
  :deep(.ant-picker-calendar .ant-picker-panel) {
    border: none;
  }

  :deep(.ant-picker-calendar-date-value) {
    display: none;
  }
  :deep(.ant-picker-cell-inner::before) {
    display: none;
  }
  :deep(.ant-picker-cell-in-view.ant-picker-cell-selected
      .ant-picker-cell-inner, .ant-picker-cell-in-view.ant-picker-cell-range-start
      .ant-picker-cell-inner, .ant-picker-cell-in-view.ant-picker-cell-range-end
      .ant-picker-cell-inner) {
    background-color: transparent;
  }
</style>
